<template>
  <div class="padding">
    <div class="flex align-center justify-between">
      <div>
        <div>
          <h5 class="Gray Font17 Bold">自定义动作</h5>
        </div>
        <div class="padding-top">
          <span class="Font13 Gray_9e">自定义对记录可执行的操作</span>
        </div>
      </div>
      <div class="flex align-center justify-end">
        <div class="margin-rght">
          <a-icon class="mRight13" type="delete"></a-icon>
          回收站
        </div>
        <div class="padding-left">
          <a-button @click="addClick" type="primary" icon="plus" shape="round"
            >添加按钮</a-button
          >
        </div>
      </div>
    </div>

    <div class="printTemplatesList overflowHidden flexColumn flex-button">
      <div class="printTemplatesList-header">
        <div class="name flex-button mRight20 valignWrapper">
          <div class="flex-button">名称</div>
          <div class="flexColumn"></div>
        </div>
        <div class="views flex-button mRight20">使用范围</div>
        <div class="mRight8 w120px text-center">操作</div>
      </div>
      <div class="printTemplatesList-box flex-button">
        <eip-empty v-if="options && options.length == 0"></eip-empty>

        <div
          class="printTemplatesList-tr printBtnsList-tr"
          v-for="(item, index) in options"
          :key="index"
        >
          <div class="name flex-button mRight20 valignWrapper overflowHidden">
            <a-button :type="item.style">
              <a-icon v-if="item.icon" :type="item.icon"></a-icon
              >{{ item.name }}</a-button
            >
          </div>
          <div class="views flex-button mRight20">
            <div class="viewsBox" v-if="item.permission">
              <span class="Gray">{{
                item.permission.type == "all"
                  ? "所有记录"
                  : convertViewName(item.permission.view)
              }}</span>
            </div>
          </div>
          <div class="activeCon mRight8 w120px">
            <span class="Hand Bold" v-if="item.permission">
              <a-popover placement="rightTop" trigger="click">
                <template slot="content">
                  <a-radio-group v-model="item.permission.type">
                    <a-radio :style="radioStyle" value="all">
                      所有视图
                    </a-radio>
                    <a-radio :style="radioStyle" value="view">
                      应用于指定的视图
                    </a-radio>
                  </a-radio-group>
                  <div
                    class="margin-left"
                    v-if="item.permission.type == 'view'"
                  >
                    <a-checkbox-group v-model="item.permission.view">
                      <a-checkbox
                        v-for="item in views"
                        :key="item.zeroCodeId"
                        :value="item.zeroCodeId"
                        :style="radioStyle"
                        ><a-icon :type="item.icon"></a-icon>
                        {{ item.name }}</a-checkbox
                      ></a-checkbox-group
                    >
                  </div>
                </template>
                <template slot="title">
                  <span>使用范围</span>
                </template>
                <span class="text-eip">使用范围</span>
              </a-popover> </span
            ><span class="Hand mLeft20 Bold text-eip" @click="editClick(item)"
              >编辑</span
            >
            <a-popconfirm
              placement="topRight"
              title="确定复制按钮?"
              ok-text="是"
              cancel-text="否"
              @confirm="copyClick(item)"
            >
              <span class="Hand mLeft20 Bold text-eip">复制</span>
            </a-popconfirm>

            <a-popconfirm
              placement="topRight"
              title="确定删除按钮?"
              ok-text="是"
              cancel-text="否"
              @confirm="delClick(item)"
            >
              <span class="Hand mLeft20 Bold" style="color: red">删除</span>
            </a-popconfirm>
          </div>
        </div>
      </div>
    </div>
    <edit
      ref="edit"
      :mode="edit.mode"
      :title="edit.title"
      :options="edit.options"
      v-if="edit.visible"
      :zeroCodeId="zeroCodeId"
      :visible.sync="edit.visible"
      @ok="editOk"
    ></edit>
  </div>
</template>
<script>
import { findByMenuId } from "@/services/system/zerocode/app/designer";
import edit from "./edit";
import { newGuid } from "@/utils/util";
export default {
  components: {
    edit,
  },
  data() {
    return {
      radioStyle: {
        display: "block",
        height: "30px",
        lineHeight: "30px",
      },
      views: [],
      height: window.innerHeight - 112,
      edit: {
        visible: false,
        options: {},
        title: "",
        mode: "add",
      },
    };
  },
  props: {
    menuId: String,
    options: {
      type: Array,
    },
    zeroCodeId: String,
  },
  mounted() {
    this.initViewList();
  },
  methods: {
    /**
     * 初始化视图
     */
    initViewList() {
      let that = this;
      /**
       * 获取列表配置项
       */
      findByMenuId({
        menuId: that.menuId,
        type: that.eipZeroCodeMenuType.view,
      }).then(function (result) {
        if (result.code === that.eipResultCode.success) {
          that.views = result.data;
        } else {
          that.$message.error(result.msg);
        }
      });
    },

    /**
     * 格式化视图名称
     */
    convertViewName(ids) {
      return this.views
        .filter((m) => ids.includes(m.zeroCodeId))
        .map((m) => m.name)
        .join(",");
    },

    /**
     *
     */
    addClick() {
      this.edit.visible = true;
      this.edit.mode = "add";
      this.edit.title = "添加按钮";
    },
    /**
     *
     */
    editClick(form) {
      this.edit.visible = true;
      this.edit.options = form;
      this.edit.mode = "edit";
      this.edit.title = "修改按钮";
    },
    /**
     * 删除
     * @param item
     */
    delClick(form) {
      let number = 0;
      this.options.forEach((item, index) => {
        if (item.id == form.id) {
          number = index;
        }
      });
      this.options.splice(number, 1);
    },
    /**
     *
     * @param form
     */
    editOk(form) {
      //是否已有
      let that = this;
      if (
        this.edit.mode == "add" &&
        form.action != this.eipZeroCodeFormSettingButtonAction.workflow
      ) {
        this.options.push(form);
      } else if (
        this.edit.mode == "add" &&
        form.action == this.eipZeroCodeFormSettingButtonAction.workflow &&
        form.submitAfterAutomationConfig.name == null
      ) {
        this.options.push(form);
      } else {
        let number = 0;
        this.options.forEach((item, index) => {
          if (item.id == form.id) {
            number = index;
          }
        });
        that.options.splice(number, 1, form);
      }
    },

    /**
     *复制
     */
    copyClick(form) {
      var copy = this.$utils.clone(form, true);
      copy.id = newGuid();
      this.options.push(copy);
    },
  },
};
</script>
<style scoped>
.Font17 {
  font-size: 17px !important;
}

.Gray,
.Gray14 {
  color: #333 !important;
}
.Bold {
  font-weight: 700 !important;
}
.Font13 {
  font-size: 13px !important;
}

.Gray_9e {
  color: #9e9e9e !important;
}

.printTemplatesList {
  height: calc(100% - 68px);
  margin-right: -32px;
  margin-top: 3px;
  width: 100%;
}

.printTemplatesList .printTemplatesList-header {
  align-items: center;
  border-bottom: 1px solid #ddd;
  color: #757575;
  display: flex;
  font-size: 13px;
  font-weight: 600;
  padding-bottom: 11px;
}
.printBox .printTemplatesList .printTemplatesList-box {
  -ms-overflow-style: none;
  overflow-y: scroll;
  scrollbar-width: none;
}
.flex-button {
  flex: 1;
}
.flexColumn {
  display: -ms-flexbox;
  display: flex;
  display: -webkit-flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.overflowHidden {
  zoom: 1;
  overflow: hidden;
}

.printTemplatesList .printTemplatesList-header .name,
.printTemplatesList .printTemplatesList-tr .name {
  padding-left: 11px;
}

.valignWrapper {
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.mRight20 {
  margin-right: 20px !important;
}

.printTemplatesList .printTemplatesList-box {
  overflow-y: scroll;
  scrollbar-width: none;
}
.printTemplatesList .printTemplatesList-tr {
  align-items: center;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  height: auto !important;
  min-height: 68px !important;
}
.printTemplatesList .printTemplatesList-header .name,
.printTemplatesList .printTemplatesList-tr .name {
  padding-left: 11px;
}
.printTemplatesList .printTemplatesList-tr .activeCon > span {
  display: inline-flex;
}
.Bold {
  font-weight: 700 !important;
}
.Hand,
.pointer {
  cursor: pointer;
}
.printTemplatesList .printTemplatesList-tr .activeCon > span {
  display: inline-flex;
}

.mLeft20 {
  margin-left: 20px !important;
}
.Bold {
  font-weight: 700 !important;
}
.Hand,
.pointer {
  cursor: pointer;
}
.mRight20 {
  margin-right: 20px !important;
}
.printTemplatesList .printTemplatesList-tr .views {
  padding: 10px 0;
}
.printTemplatesList .printTemplatesList-header .w120px,
.printTemplatesList .printTemplatesList-tr .w120px {
  width: 220px;
}

.mRight8 {
  margin-right: 8px !important;
}
.Font24 {
  font-size: 24px !important;
}

.mRight13 {
  margin-right: 13px !important;
}

/deep/ .ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px !important;
}
</style>
